<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Showing Product Information With CSS3 3D Transform </title>
  <style>
    body {
      margin-top: 5em;
      text-align: center;
      color: #414142;
      background: rgb(246,241,232);
      background: -moz-radial-gradient(center, ellipse cover,  rgba(246,241,232,1) 39%, rgba(212,204,186,1) 100%);
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(39%,rgba(246,241,232,1)), color-stop(100%,rgba(212,204,186,1)));
      background: -webkit-radial-gradient(center, ellipse cover,  rgba(246,241,232,1) 39%,rgba(212,204,186,1) 100%);
      background: -o-radial-gradient(center, ellipse cover,  rgba(246,241,232,1) 39%,rgba(212,204,186,1) 100%);
      background: -ms-radial-gradient(center, ellipse cover,  rgba(246,241,232,1) 39%,rgba(212,204,186,1) 100%);
      background: radial-gradient(center, ellipse cover,  rgba(246,241,232,1) 39%,rgba(212,204,186,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f1e8', endColorstr='#d4ccba',GradientType=1 );
    }

    h1, em, #information {
      display: block;
      font-size: 25px;
      font-weight: normal;
      font-family: "Graduate";
      margin: 2em auto;
    }

    a {
      color: #414142;
      font-style: normal;
      text-decoration: none;
      font-size: 20px;
    }

    a:hover {
      text-decoration: underline;
    }

    #container {
      display: block;
      margin: 0 auto;
      width: 1024px;
    }

    #information {
      color: red;
      font-size: 14px;
    }

    .wrapper {
      display: inline-block;
      width: 310px;
      height: 100px;
      vertical-align: top;
      margin: 1em 1.5em 2em 0;
      cursor: pointer;
      position: relative;
      font-family: Tahoma, Arial;
      -webkit-perspective: 4000px;
      -moz-perspective: 4000px;
      -ms-perspective: 4000px;
      -o-perspective: 4000px;
      perspective: 4000px;
    }

    .item {
      height: 100px;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transition: -webkit-transform .6s;
      -moz-transition: -moz-transform .6s;
      -ms-transition: -ms-transform .6s;
      -o-transition: -o-transform .6s;
      transition: transform .6s;
    }

    .item:hover {
      -webkit-transform: translateZ(-50px) rotateX(95deg);
      -moz-transform: translateZ(-50px) rotateX(95deg);
      -ms-transform: translateZ(-50px) rotateX(95deg);
      -o-transform: translateZ(-50px) rotateX(95deg);
      transform: translateZ(-50px) rotateX(95deg);
    }

    .item:hover img {
      box-shadow: none;
      border-radius: 15px;
    }

    .item:hover .information {
      box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
      border-radius: 3px;
    }

    .item img {
      display: block;
      position: absolute;
      top: 0;
      border-radius: 3px;
      box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
      -webkit-transform: translateZ(50px);
      -moz-transform: translateZ(50px);
      -ms-transform: translateZ(50px);
      -o-transform: translateZ(50px);
      transform: translateZ(50px);
      -webkit-transition: all .6s;
      -moz-transition: all .6s;
      -ms-transition: all .6s;
      -o-transition: all .6s;
      transition: all .6s;

    }

    .item .information {
      display: block;
      position: absolute;
      top: 0;
      height: 80px;
      width: 290px;
      text-align: left;
      border-radius: 15px;
      padding: 10px;
      font-size: 12px;
      text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
      box-shadow: none;
      background: rgb(236,241,244);
      background: -moz-linear-gradient(top,  rgba(236,241,244,1) 0%, rgba(190,202,217,1) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,241,244,1)), color-stop(100%,rgba(190,202,217,1)));
      background: -webkit-linear-gradient(top,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
      background: -o-linear-gradient(top,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
      background: -ms-linear-gradient(top,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
      background: linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf1f4', endColorstr='#becad9',GradientType=0 );
      -webkit-transform: rotateX(-90deg) translateZ(50px);
      -moz-transform: rotateX(-90deg) translateZ(50px);
      -ms-transform: rotateX(-90deg) translateZ(50px);
      -o-transform: rotateX(-90deg) translateZ(50px);
      transform: rotateX(-90deg) translateZ(50px);
      -webkit-transition: all .6s;
      -moz-transition: all .6s;
      -ms-transition: all .6s;
      -o-transition: all .6s;
      transition: all .6s;

    }

    .information strong {
      display: block;
      margin: .2em 0 .5em 0;
      font-size: 20px;
      font-family: "Oleo Script";
    }
  </style>
  <script src="../../迅雷下载/CubeInformation/modernizr.custom.34807.js"></script>
</head>
<body>

  <div id="container">
    
    <h1>SHOWING PRODUCT INFORMATION WITH CSS3 3D TRANSFORM</h1>
    
    <div class="wrapper">
      <div class="item">
        <img src="./img/css3.0-cube/contact.png" />
        <span class="information">
          <strong>Contact Form</strong> The easiest way to add a contact form to your shop.
        </span>
      </div>
    </div>
    
    <div class="wrapper">
      <div class="item">
        <img src="./img/css3.0-cube/chimpified.jpeg" />
        <span class="information">
          <strong>Chimpified</strong> Chimpified connects your Shopify store to your Mailchimp account.
        </span>
      </div>
    </div>
    
    <div class="wrapper">
      <div class="item">
        <img src="./img/css3.0-cube/olark.png" />
        <span class="information">
          <strong>Olark Chat</strong> Chat with your customers. Watch them fill their shopping carts.
        </span>
      </div>
    </div>
    
    <div class="wrapper">
      <div class="item">
        <img src="./img/css3.0-cube/jilt.png" />
        <span class="information">
          <strong>Jilt</strong> Jilt lets you easily and effectively follow up with customers who have abandoned their orders.
        </span>
      </div>
    </div>
    <div class="wrapper">
      <div class="item">
        <img src="./img/css3.0-cube/ordoro.png" />
        <span class="information">
          <strong>Ordoro</strong> Automate your backoffice: aggregate orders, manage inventory, print shipping labels.
        </span>
      </div>
    </div>
    <div class="wrapper">
      <div class="item">
        <img src="./img/css3.0-cube/yotpo.jpeg" />
        <span class="information">
          <strong>Yotpo</strong> Social reviewing solution,increase your social engagement through social reviews.
        </span>
      </div>
    </div>
    
  </div>  
  
  <em><a href="http://www.webstuffshare.com/?p=2551">&bull; read tutorial &bull;</a></em>
  <span id="information" style="display:none">Your browser doesn't support CSS3 3D Transform</span>
  
  <script type="text/javascript" src="./js/modernizr.custom.js"></script>
  <script type="text/javascript">
    if(!Modernizr.csstransforms3d) document.getElementById('information').style.display = 'block';
  </script>
  
  <!-- GA -->
  <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  </script>
  <script type="text/javascript">
    try {
      var pageTracker = _gat._getTracker("UA-2260508-2");
      pageTracker._trackPageview();
    } catch(err) {}</script>
  <!-- GA -->

</body>
</html>